.container {
  min-height: 100vh;
  .redPag {
    height: 100px;
    background-color: red;
    margin-top: 15px;
  }
}

.back_box {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
}

.back_box .hobao_back {
  width: 100%;
  height: 60vh;
  margin-top: 30%;
  position: relative;
}
.back_box .hobao_back .jndh_hobao {
  width: 70%;
  height: 60vh;
  display: block;
  background: #dc5943;
  margin: 0 auto;

  position: absolute;
  left: 0;
  right: 0;
}

.back_box .hobao_back .yuan_back {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 10%;
  left: 0;
}
.back_box .hobao_back .yuan_back .toxi_yuan {
  width: 45px;
  height: 45px;
  display: block;
  background: orange;
  margin: 0 auto;
  border-radius: 8px;
}
.back_box .hobao_back .yuan_back .span_yuan {
  padding: 10px 0;
  margin: 0;
  font-size: 12px;
  color: rgb(229, 233, 27);
}

.back_box .hobao_back .gaod_back {
  width: 100%;
  position: absolute;
  bottom: 18%;
  height: 70px;
  left: -6Px;
  display: flex;
  justify-content: center;
  align-items: center;
  .img_A_zuan {
    width: 46px;
    height: 46px;
    margin: 0 auto;
    display: block;
    background: orange;
    border-radius: 50%;
    &.open{
      animation: rotateAndScale 1s forwards;
    }
   @keyframes rotateAndScale {
     to{
      transform: rotate(360deg) scale(1.5);
     }
   }
  }
}
.back_box .hobao_back .gaod_back .nrhc_gaod {
  width: 100%;
}
.back_box .hobao_back .gaod_back .nrhc_gaod .checkbox {
  display: none;
}
.back_box .hobao_back .gaod_back .nrhc_gaod .zuan_gaod {
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
.back_box .hobao_back .gaod_back .nrhc_gaod .zuan_gaod .img_A_zuan {
  width: 46px;
  height: 46px;
  margin: 0 auto;
  display: block;
  background: orange;
  border-radius: 50%;
  transition: transform 1s;
}

.back_box .hobao_back .gaod_back .nrhc_gaod .checkbox:checked + .zuan_gaod .img_A_zuan {
  transform: rotate(360deg) scale(1.5);
}

.back_box .hobao_back .jilu_back {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 16px;
  left: 0;
}
.back_box .hobao_back .jilu_back .soqi_jilu {
  color: white;
  font-size: 12px;
  text-decoration: none;
  color: rgb(229, 233, 27);
}

.back_box .shu_box {
  width: 100%;
  height: 42px;
  text-align: center;
  position: absolute;
  top: 45%;
  left: -3px;
  right: 12px;
}
.back_box .shu_box .span_shu {
  margin-top: 10px;
  font-size: 25px;
  color: rgb(229, 233, 27);
}

//红包列表
.leib_box{
  width: 100%;
  overflow: hidden;
  background: white;
}


.leib_box .hoba_leib{
  width: 72%;
  margin: 0 auto;
  background: #fa9d3d;
  padding-top: 15Px;
  border: 1Px solid #dedede;
  border-radius: 5Px;
  margin-top: 15Px;
  position: relative;
}

.leib_box .hoba_leib .imgs_hoba{
  width: 40Px;
  height: 45Px;
  margin: 0 10Px;
  float: left;
  border-radius: 3Px;
}

.leib_box .hoba_leib .daji_hoba{
  margin: 0 ;
  font-size: 15Px;
  font-weight: 300;
  color: white;
  padding-bottom: 5Px;

}

.leib_box .hoba_leib .chak_hoba{
  text-decoration: none;
  color: white;
  font-size: 12Px;
  font-weight: 300;
}

.leib_box .hoba_leib .nius_hoba{
  margin: 15Px 0 0 0;
  padding: 3Px 5Px;
  background: white;
  font-size: 12Px;
  color: #969696;
}



.leib_box .hoba_leib.aima_leib .back_hoba{
  width: 100%;
  background: rgba(255, 255, 255, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

//红包没了弹窗css
.mele_box{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top:0;
  left: 0;
}


.mele_box .moku_mele{
  width: 100%;
  height: 60vh;
  margin-top: 30%;
  position: relative;
}

.mele_box .moku_mele .imgs_moku{
  width: 70%;
  height: 60vh;
  display: block;
  background: #dc5943;
  margin: 0 auto;

  position: absolute;
  left: 0;
  right: 0;
}

.mele_box .moku_mele .baci_moku{
  width: 100%;
  text-align: center;
  position: absolute;
  top: 12%;
  left: 0;
}
.mele_box .moku_mele .baci_moku .imge_baci{
  width: 45Px;
  height: 45Px;
  display: block;
  background: white;
  margin: 0 auto;
  border-radius: 8Px;
}
.mele_box .moku_mele .baci_moku .nice_baci{
  padding: 8Px 0;
  margin: 0;
  font-size: 12Px;
  color: rgb(229, 233, 27);
}

.mele_box .moku_mele .shom_moku{
  width: 100%;
  text-align: center;
  position: absolute;
  top: 34%;
  left: 0;
}
.mele_box .moku_mele .shom_moku .pwen_shom{
  margin: 0;
  font-size: 18Px;
  color: rgb(229, 233, 27);
  font-weight: 500;
}

.mele_box .moku_mele .daji_moku{
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 35Px;
  left: 0;
}
.mele_box .moku_mele .daji_moku .kaka_daji{
  font-size: 14Px;
  text-decoration: none;
  color: rgb(229, 233, 27);
}

